Day18：WS 串接 Client & Server

2021 iThome 鐵人賽

DAY 19

Modern Web

摸索 WebSocket，遠望 WebRTC系列第 19 篇

13th鐵人賽

DoDoBird

團隊血汗攻城屍

2021-10-04 17:40:26

1281 瀏覽

分享至

初始化專案

ws 在使用上和 socket.io 其實頗為類似，因此預計實作上會分兩個階段，第一階段就是草稿為主，不考慮樣式的部分，僅就功能面看能不能實做出來。第二階段才會尋找合適的設計導入，不過這大概又是另一個難題了。

專案結構

建立 client 和 server 兩個資料夾用於存放兩個端點。

同時兩端都安裝 ws 這個 plugin。

yarn add ws

Server

server-side 使用 require 導入 ws 後，建立 server 端口。

on() 這個語法同樣是用來監聽。

// server/index.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', function connection(ws) {
  console.log('one client is connected');
});

Client

client-side 的 HTML 使用 live-server 運行後，同樣使用 node index.js 去啟動 server 端。刷新 HTML 頁面，即可看到 terminal 印出 server 的 console.log() 內容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>This is Client</h1>

    <script>
      const ws = new WebSocket('ws://127.0.0.1:3000');
    </script>
  </body>
</html>

切到 client 底下的 index.js 連結 server-side 建立的 3000 端口

const WebSocket = require('ws');

const ws = new WebSocket('ws://127.0.0.1:3000');

ws.on('open', function () {
  console.log('client is connected to server');
});